<template>
	<view class="container">
		<template v-if="!multiple">
			<view class="han-select-list">
				<view class="item"  v-for="(item,index) in list" :key="index"
					@click="handleClickItem(item,index)">
						<view class="item-content" :class="{'active':index == currentIndex}" :style="{fontSize: `${fontSize}rpx`}">{{ item.name }}</view>
					</view>
			</view>
		</template>
		<template v-else>
			<view class="han-select-list">
				<view class="item" 
					v-for="(item,index) in list" :key="index" @click="handleClickItem1(item,index)">
					<view class="item-content" :class="{'active': isChecked(item)}" :style="{fontSize: `${fontSize}rpx`}">{{ item.name }}</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			//是否多选
			multiple: {
				type: Boolean,
				default: false
			},
			//再次点击取消选中
			isToggle: {
				type: Boolean,
				default: false
			},
			fontSize:{
				type:String,
				default:'26'
			},
			selected:{
				type:String,
				default:''
			},
		},
		watch:{
			selected(value){
				console.log(value)
				//this.setSelected()
			},
			list(value){
				if(value.length){
					this.setSelected()
				}
			},
		},
		data() {
			return {
				currentIndex: -1,
				checkList: []
			}
		},
		onLoad() {
		},
		mounted() {
			this.setSelected()
		},
		methods: {
			setSelected(){
				if(this.selected != ''){
					this.list.filter((item,index)=>{
						if(item.name === this.selected){
							this.currentIndex = index
						}
					})
				}
			},
			isChecked(item) {
				return this.checkList.find(node => {
					return node.id === item.id
				})
			},
			handleClickItem(item, index) {
				if(this.currentIndex == index){
					if(this.isToggle){
						this.currentIndex = -1;
						this.$emit('change', null , index);
						return false;
					}
				}
				this.currentIndex = index;
				this.$emit('change', item, index)
			},
			handleClickItem1(item, index) {
				let currentItem = this.checkList.find(node => {
					return node.id === item.id
				})
				let currentIndex = this.checkList.findIndex(node => {
					return node.id == item.id
				});
				if (currentItem) {
					this.checkList.splice(currentIndex, 1)
				} else {
					this.checkList.push(item)
				}
				this.$emit('change', this.checkList)
			},
			reset(type){
				this.checkList = [];
				if(type){
					this.currentIndex = -1
				}else{
					this.currentIndex = 0
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.han-select-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		padding: 0 20rpx;
		margin-top: 30rpx;
		.item {
			width: 33.33%;
			margin-bottom: 15rpx;
			.item-content{
				border: 1rpx solid #f6f6f6;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 6rpx;
				margin-right:15rpx;
				background-color: #f6f6f6;
			}
			.item-content.active{
				border: 1rpx solid #edb5a4;
				background-color: #fff4f2;
				color: #e6331c
			}
		}
		.item:nth-child(3n+3){
			.item-content{
				margin-right:0
			}
		}
		
	}
</style>